  <!-- Color Switcher -->
  <div class="ec-colorswitcher">
   <a class="ec-handle" href="#"><i class="zmdi zmdi-settings"></i></a>
   <h3>选择样式</h3>
   <div class="ec-switcherarea">
    <h6>选择布局</h6>
    <div class="layout-btn">
     <a href="#" class="ec-boxed"><span>盒子</span></a>
     <a href="#" class="ec-wide"><span>全屏</span></a>
    </div>
    <h6>选择颜色</h6>
    <ul class="ec-switcher">
     <li><a href="#" class="cs-color-1 styleswitch" data-rel="color-one"></a></li>
     <li><a href="#" class="cs-color-2 styleswitch" data-rel="color-two"></a></li>
     <li><a href="#" class="cs-color-3 styleswitch" data-rel="color-three"></a></li>
     <li><a href="#" class="cs-color-4 styleswitch" data-rel="color-four"></a></li>
     <li><a href="#" class="cs-color-5 styleswitch" data-rel="color-five"></a></li>
     <li><a href="#" class="cs-color-6 styleswitch" data-rel="color-six"></a></li>
     <li><a href="#" class="cs-color-7 styleswitch" data-rel="color-seven"></a></li>
     <li><a href="#" class="cs-color-8 styleswitch" data-rel="color-eight"></a></li>
     <li><a href="#" class="cs-color-9 styleswitch" data-rel="color-nine"></a></li>
     <li><a href="#" class="cs-color-10 styleswitch" data-rel="color-ten"></a></li>
    </ul>
    <div class="ec-pattren">
     <h6>选择背景</h6>
     <div class="pattren-wrap">
      <a href="#" data-rel="pattren1" class="styleswitch"><img src="{$public}../index/img/ec-pattren/pattren1.jpg" alt="" /></a>
      <a href="#" data-rel="pattren2" class="styleswitch"><img src="{$public}../index/img/ec-pattren/pattren2.jpg" alt="" /></a>
      <a href="#" data-rel="pattren3" class="styleswitch"><img src="{$public}../index/img/ec-pattren/pattren3.jpg" alt="" /></a>
      <a href="#" data-rel="pattren4" class="styleswitch"><img src="{$public}../index/img/ec-pattren/pattren4.jpg" alt="" /></a>
      <a href="#" data-rel="pattren5" class="styleswitch"><img src="{$public}../index/img/ec-pattren/pattren5.jpg" alt="" /></a>
     </div>
    </div>
    <div class="ec-background">
     <h6>选择背景</h6>
     <div class="background-wrap">
      <a href="#" data-rel="background1" class="styleswitch"><img src="{$public}../index/img/ec-background/bg-1.jpg" alt="" /></a>
      <a href="#" data-rel="background2" class="styleswitch"><img src="{$public}../index/img/ec-background/bg-2.jpg" alt="" /></a>
      <a href="#" data-rel="background3" class="styleswitch"><img src="{$public}../index/img/ec-background/bg-3.jpg" alt="" /></a>
      <a href="#" data-rel="background4" class="styleswitch"><img src="{$public}../index/img/ec-background/bg-4.jpg" alt="" /></a>
      <a href="#" data-rel="background5" class="styleswitch"><img src="{$public}../index/img/ec-background/bg-5.jpg" alt="" /></a>
     </div>
    </div>
   </div>
  </div>
  <!-- Color Switcher end -->
  <!-- jquery
		============================================ -->
  <script src="{$public}../index/js/vendor/jquery-1.12.4.min.js"></script>
  <!-- bootstrap JS
		============================================ -->
  <script src="{$public}../index/js/bootstrap.min.js"></script>
  <!-- nivo slider js
		============================================ -->
  <script src="{$public}../index/lib/nivo-slider/js/jquery.nivo.slider.js" type="text/javascript"></script>
  <script src="{$public}../index/lib/nivo-slider/home.js" type="text/javascript"></script>
  <!-- meanmenu JS
		============================================ -->
  <script src="{$public}../index/js/jquery.meanmenu.js"></script>
  <!-- wow JS
		============================================ -->
  <script src="{$public}../index/js/wow.min.js"></script>
  <!-- owl.carousel JS
		============================================ -->
  <script src="{$public}../index/js/owl.carousel.min.js"></script>
  <!-- scrollUp JS
		============================================ -->
  <script src="{$public}../index/js/jquery.scrollUp.min.js"></script>
  <!-- Waypoints JS
		============================================ -->
  <script src="{$public}../index/js/waypoints.min.js"></script>
  <!-- Counterup JS
		============================================ -->
  <script src="{$public}../index/js/jquery.counterup.min.js"></script>
  <!-- Slick JS
		============================================ -->
  <script src="{$public}../index/js/slick.min.js"></script>
  <!-- Animated Headlines JS
		============================================ -->
  <script src="{$public}../index/js/animated-headlines.js"></script>
  <!-- Textilate JS
		============================================ -->
  <script src="{$public}../index/js/textilate.js"></script>
  <!-- Lettering JS
		============================================ -->
  <script src="{$public}../index/js/lettering.js"></script>
  <!-- Video Player JS
		============================================ -->
  <script src="{$public}../index/js/jquery.mb.YTPlayer.js"></script>
  <!-- plugins JS
		============================================ -->
  <script src="{$public}../index/js/plugins.js"></script>
  <!-- StyleSwitch JS
		============================================ -->
  <script src="{$public}../index/js/styleswitch.js"></script>
  <!-- main JS
		============================================ -->
  <script src="{$public}../index/js/main.js"></script>